html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;

    .photo {
        position: relative;
        width: 100%;
    }

    .logo {
        position: absolute;
        top: 40px;
        left: 280px;
        width: 100%;
    }

    .nav {
        width: 100%;
        height: 44px;
        background-color: #1476bd;
        box-sizing: border-box;

        s {
            color: #d8e89f;
            font-size: 18px;
            line-height: 44px;
            text-align: center;
            margin-right: 20px;
        }

        span {
            font-size: 18px;
            color: #fff;
            line-height: 44px;
            padding: 0 25px;
            text-align: center;
            border-left: 1px solid #ccc;

        }
    }

    .search {
        position: relative;
        width: 100%;
        height: 150px;
        background-color: #3d5d7c;
        margin: 0;

        .city {

            float: left;
            width: 375px;
            height: 50px;
            background-color: #fff;
            margin-top: 30px;

            .iconfont {
                float: left;
                font-size: 25px;
                line-height: 50px;
                color: #4b8ecc;
                margin-left: 10px;
            }

            span {
                line-height: 50px;
                color: #4b8ecc;
                font-size: 18px;
                margin-left: 10px;
            }

            .right {
                float: right;
                width: 50px;
                height: 50px;
                border-left: 1px solid #ccc;
            }
        }

        .searcharea {
            position: absolute;
            top: 30px;
            left: 400px;
            width: 600px;
            height: 50px;
            background-color: #fff;



            input {
                width: 470px;
                height: 100%;
                box-sizing: border-box;
                border: none;
                font-size: 14px;
                padding-left: 20px;

            }

            button {
                float: right;
                width: 130px;
                box-sizing: border-box;
                height: 100%;
                color: #fff;
                background-color: #63afed;
                border: none;
                font-size: 16px;
            }
        }

        .bottom {
            position: absolute;
            bottom: -125px;
            left: 0px;

            s {
                color: #afb6b3;
                font-size: 18px;
            }

            span {
                color: #afb6b3;
                font-size: 18px;
                padding: 0 10px;
            }
        }
    }
}

main {
    width: 100%;

    .header {
        width: 100%;
        height: 40px;

        span {
            font-size: 14px;
            line-height: 40px;
        }
    }

    .middle {
        position: relative;
        // height: 700px;
        width: 100%;
        height: 460px;

        .left {
            float: left;
            width: 550px;

            .bottom {
                float: left;

                .zuo {
                    float: left;
                    font-size: 30px;
                    width: 50px;
                    height: 87px;
                    background-color: #478dcd;
                    margin-right: 10px;

                    .iconfont {
                        color: #fff;
                        font-size: 30px;
                        text-align: center;
                        line-height: 87px;
                    }
                }

                .you {
                    float: right;
                    margin-left: 42px;
                    font-size: 30px;
                    width: 50px;
                    height: 87px;
                    background-color: #478dcd;

                    .iconfont {
                        color: #fff;
                        font-size: 30px;
                        text-align: center;
                        line-height: 87px;
                    }
                }

                img {
                    width: 130px;
                    height: 87px;
                    // margin-right: 5px;

                }

            }
        }

        .right {
            position: absolute;
            top: 10px;
            right: 450px;

            // float: right;
            h1 {
                font-size: 25px;
                font-weight: 300;
                margin-bottom: 10px;
            }

            s {
                padding: 5px 0;
            }

            .price {
                width: 400px;
                height: 60px;
                background-color: #f2f6ff;
                margin-top: 10px;

                span {
                    padding-left: 10px;
                    line-height: 60px;
                    font-size: 16px;

                    s {
                        font-size: 30px;
                        color: #ff6700;

                    }
                }
            }

            .ziliao {
                padding: 20px 0;

                s {
                    width: auto;
                    border: 1px solid #ff6700;
                    margin-left: 5px;
                    background-color: #fef7f7;
                }
            }
        }


    }

    .bottom1 {
        width: 100%;

        .bottom1-top {
            width: 100%;
            height: 50px;
            border: 1px solid #ccc;

            .title {

                width: 150px;
                height: 50px;
                box-sizing: border-box;
                border-top: 3px solid #1476bd;
                border-right: 1px solid #ccc;

                span {
                    color: #63afed;
                    font-size: 16px;
                    margin-left: 42px;
                }

            }


        }

        .bottom1-bottom {
            width: 100%;
            height: 150px;
            border: 1px solid #ccc;
            line-height: 28px;

            p {
                margin-left: 10px;
                font-size: 18px;

                s {
                    float: left;
                    color: #63afed;
                }
            }
        }
    }
}

footer {
    width: 100%;
    margin-top: 670px;

    .footer {
        width: 100%;
        height: 100px;
        background-color: #f5f5f5;
        border-top: 3px solid #1476bd;
        text-align: center;


        span {
            font-size: 18px;
            color: #999;
            line-height: 30px;

        }
    }
}